<!--  -->
<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div>
          <el-form ref="form" :inline="true" :model="form" label-width="130px">
            <el-row>
              <!-- <el-col :span="6">
                <el-form-item label="项目名称">
                  <el-input v-model="form.goods_name" clearable />
                </el-form-item>
              </el-col> -->
              <el-col :span="6">
                <el-form-item label="服务名称">
                  <el-input v-model="form.project_name" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="服务类型">
                  <el-select
                    v-model="form.project_type"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in projectTypeArray"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="上架状态">
                  <el-select
                    v-model="form.project_status"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in onShelfArray"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" @click="handleSearch"
                    >查询</el-button
                  >
                  <el-button type="primary" class="mr_20" @click="handleReset"
                    >重置</el-button
                  >
                  <router-link to="/Seller/project_order/toCheck">
                    <el-button type="primary" @click="add">添加服务</el-button>
                  </router-link>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="admin_table_main">
        <el-table :data="tableData" class="tableData" style="width: 100%">
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="50"
            align="center"
            :index="table_index"
          />
          <el-table-column prop="project_name" label="服务名称" />
          <el-table-column prop="project_type_cn" label="服务类型" />
          <el-table-column label="分类" prop="class_cn" />
          <el-table-column prop="project_settlement_price" label="结算价" />
          <el-table-column prop="project_verify_cn" label="审核状态" />
          <el-table-column label="上架状态" prop="project_status">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.project_status"
                class="switchStyle"
                active-color="#13ce66"
                inactive-color="#eee"
                :active-value="1"
                :inactive-value="0"
                @click.native="
                  changeStatus(scope.row.id, scope.row.project_status)
                "
              />
            </template>
          </el-table-column>
          <el-table-column prop="add_time" label="创建时间" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="
                  $router.push({
                    name: 'project_order_toCheck',
                    params: { id: scope.row.id },
                  })
                "
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleDel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form.page"
              :page-sizes="page_sizes"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        project_name: "",
        project_status: "",
        project_type: "",
        page: 1,
        page_size: 10,
      },
      projectTypeArray: [], //服务类型
      onShelfArray: [], //上下架状态
      tableData: [{}],
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
    };
  },

  components: {},

  mounted() {
    this.getList();
  },

  methods: {
    // 序号
    table_index(index) {},
    // 获取列表
    getList() {
      this.$get(this.$api.projectIndex, this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.onShelfArray = res.data.onShelfArray;
          this.projectTypeArray = res.data.projectTypeArray;
          this.page_totals = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 添加
    add() {},
    // 删除
    handleDel(id) {
      this.$confirm("此操作将会删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post(this.$api.projectDel, { id }).then((res) => {
            console.log("res", res);
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 重置
    handleReset() {
      this.form.project_name = "";
      this.form.project_status = "";
      this.form.project_type = "";
      this.getList(this.form);
    },
    // 上下架状态
    changeStatus(id, on_shelf) {
      let data = { id, on_shelf };
      this.$post(this.$api.projectOnshelf, data).then((res) => {
        // console.log("res", res);
        if (res.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
  },
};
</script>
<style  scoped>
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.mr_20 {
  margin-right: 20px;
}
</style>